<template>

    <div style="width: 100%;" v-loading="loading">

        <div class="addSettingSeatBtn">
            <el-button
                    @click="addSettingSeatVisible = true"
                    round
                    icon="el-icon-plus"
                    type="primary">添加座位信息
            </el-button>
        </div>
        <div class="settingSeatTable">
            <el-table :data="list" border style="width: 1101px">

                <el-table-column
                        align="center"
                        prop="position_name"
                        label="	位置"
                        width="180">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="seat_number"
                        label="	座位编号"
                        width="180">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="capacity_range"
                        label="容纳范围"
                        width="180">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="min_capacity"
                        label="	最小容纳范围"
                        width="180">
                </el-table-column>

                <el-table-column
                        align="center"
                        prop="max_capacity"
                        label="最大容纳范围"
                        width="180">
                </el-table-column>

                <el-table-column
                        align="center"
                        width="200">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                @click="handleInfo(scope.row)"
                                type="primary"
                                size="mini">修改
                        </el-button>
                        <el-button
                                icon="el-icon-delete"
                                type="danger"
                                @click="handleDelete(scope.row.id)"
                                size="mini">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <div class="settingSeatPage">
            <el-pagination
                    v-if="settingSeatVisible"
                    @current-change="settingSeatPage"
                    :page-size="10"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>


        <!--添加座位-->
        <el-dialog title="添加座位信息" :visible.sync="addSettingSeatVisible">
            <el-form ref="addForm" :model="addSeatData" :rules="rules" >
                <el-form-item label="座位编号" :label-width="labelWidth" prop="seat_number">
                    <el-input
                            placeholder="请输入位置编号"
                            style="width: 500px"
                            v-model="addSeatData.seat_number"
                            autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-form-item label="位置" :label-width="labelWidth" prop="position">
                    <el-select
                            style="width: 500px"
                            v-model="addSeatData.position"
                            placeholder="请选择">
                        <el-option
                                v-for="item in seatList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最小容纳范围" :label-width="labelWidth" prop="min_capacity">
                    <el-input-number v-model="addSeatData.min_capacity" label="最小容纳范围">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="最大容纳范围" :label-width="labelWidth" prop="max_capacity">
                    <el-input-number v-model="addSeatData.max_capacity" label="最大容纳范围">
                    </el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addSettingSeatVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSettingSeat('addForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--添加座位-->
        <el-dialog title="修改座位信息" :visible.sync="updateSettingSeatVisible">
            <el-form ref="updateForm" :model="updateSeatData" :rules="rules" >
                <el-form-item label="座位编号" :label-width="labelWidth" prop="seat_number">
                    <el-input
                            placeholder="请输入位置编号"
                            style="width: 500px"
                            v-model="updateSeatData.seat_number"
                            autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-form-item label="位置" :label-width="labelWidth" prop="position">
                    <el-select
                            style="width: 500px"
                            v-model="updateSeatData.position"
                            placeholder="请选择">
                        <el-option
                                v-for="item in seatList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最小容纳范围" :label-width="labelWidth" prop="min_capacity">
                    <el-input-number v-model="updateSeatData.min_capacity" label="最小容纳范围">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="最大容纳范围" :label-width="labelWidth" prop="max_capacity">
                    <el-input-number v-model="updateSeatData.max_capacity" label="最大容纳范围">
                    </el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateSettingSeatVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateSettingSeat('updateForm')">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>


<script>
    export default {
        name: 'settingSeat',
        data() {
            return {
                list: [],
                loading: false,
                total: 0,
                settingSeatVisible: true,
                seatList: [],
                addSettingSeatVisible: false,
                updateSettingSeatVisible: false,
                addSeatData: {},
                updateSeatData: {},
                labelWidth: '120px',
                rules: {
                    seat_number: [
                        { required: true, message: '请输入联系人', trigger: 'blur' },
                    ],
                    position: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                    ],
                    min_capacity: [
                        { required: true, message: '请选择性别', trigger: 'blur' },
                    ],
                    max_capacity: [
                        { required: true, message: '请输入用餐人数', trigger: 'blur' },
                    ]
                }
            }
        },
        methods: {
            defaultData(page) {
                this.loading = true;
                this.$http.get('/store/seat/list', {
                    params: {
                        token: localStorage.getItem('user_token'),
                        store_id: localStorage.getItem('user_store_id'),
                        page: page
                    }
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;
                        if (response.data.data.pagination.total <= 10) {
                            this.settingSeatVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },

            //获取位置信息
            getSeatData() {
                this.loading = true;
                this.$http.get('/store/seat/position', {
                    params: {
                        token: localStorage.getItem('user_token'),
                    }
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.seatList = response.data.data;
                    }
                    this.loading = false;
                }).catch(error => {
                    console.log(error);
                    this.loading = false;
                });

            },

            handleInfo(valueInfo) {
                this.updateSeatData = {};
                this.updateSeatData = valueInfo;
                this.updateSettingSeatVisible = true;
            },

            //修改座位信息
            updateSettingSeat(name){
                if (this.updateSeatData.min_capacity > this.updateSeatData.max_capacity) {
                    this.$message.warning('最小容纳范围不能大于最大容纳范围');
                    return;
                }

                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        return false;
                    } else {
                        this.loading = true;
                        this.updateSeatData.token = localStorage.getItem('user_token');
                        this.$http.post('/store/seat/update', this.updateSeatData).then(response => {
                            if (response.data.status === 'success'){
                                this.$message.success('修改成功');
                                this.defaultData();
                                this.updateSettingSeatVisible = false;
                                this.updateSeatData = {};
                            }
                            this.loading = false;
                        }).catch( () => {
                            this.loading = false;
                        })
                    }
                });
            },

            //添加座位信息
            addSettingSeat(name){
                if (this.addSeatData.min_capacity > this.addSeatData.max_capacity) {
                    this.$message.warning('最小容纳范围不能大于最大容纳范围');
                    return;
                }


                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        return false;
                    } else {
                        this.loading = true;
                        this.addSeatData.stores_id = localStorage.getItem('user_store_id');
                        this.addSeatData.token = localStorage.getItem('user_token');
                        this.$http.post('/store/seat/add', this.addSeatData).then(response => {
                            if (response.data.status === 'success'){
                                this.$message.success('添加成功');
                                this.defaultData();
                                this.addSettingSeatVisible = false;
                                this.addSeatData = {};
                            }
                            this.loading = false;
                        }).catch( () => {
                            this.loading = false;
                        })
                    }
                });
            },

            //删除座位信息
            handleDelete(id) {
                this.loading = true;
                this.$confirm('是否删除该座位?', '删除座位', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/store/seat/del', {
                        params: {
                            token: localStorage.getItem('user_token'),
                            id: id
                        }
                    }).then(response => {
                        if (response.data.status === 'success') {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch(error => {
                        console.log(error);
                        this.loading = false;
                    })

                });
            },

            settingSeatPage(page){
                this.defaultData(page);
            }
        },
        mounted() {
            this.defaultData();
            this.getSeatData();
        }
    }
</script>

<style>
    .settingSeatTable {
        margin-top: 24px;
        margin-left: 200px;
    }

    .settingSeatPage {
        margin-top: 24px;
        margin-left: 700px;
    }

    .addSettingSeatBtn{
        margin-top: 50px;
        margin-left: 200px;
    }
</style>
